<!DOCTYPE html>

<html>
<head>
    <title>第一个three.js文件三维场景</title>
    <script type="text/javascript" src="../../three.js/build/three.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    // 创建场景对象
    var scene = new THREE.Scene();

    // 创建网格模型
    // var geometry = new THREE.SphereGeometry(60, 40, 49);// 球型
    var geometry = new THREE.BoxGeometry(100, 100, 100);// 立体几何对象

    // 材质对象
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });

    // 网格模型对象
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400,200,300);// 点光源位置
    scene.add(point);

    // 环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    // 相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width/height;
    var s = 200;// 三维场景显示范围控制系数，系数越大，显示范围越大
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);// 相机位置
    camera.lookAt(scene.position);// 设置相机方向

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域大小
    renderer.setClearColor(0xb9d3ff, 1);// 设置背景色
    document.body.appendChild(renderer.domElement);// body 元素中插入

    // 执行渲染
    renderer.render(scene, camera);
</script>
</body>
</html>